<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>个人页面</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/plugins/jquery/jquery.min.js"></script>
	<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/userProfiles.css">
	<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
	<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
	<script src="/js/common.js"></script>
	<link rel="stylesheet" href="/js/plugins/dialog2/css/dialog.css">
	<script src="/js/plugins/dialog2/js/dialog.min.js"></script>

	<script>

        $(function () {

            //获取请求地址中的作者id,根据id查询用户信息,再渲染到页面中
            var params = getParams();

            if (!params) {
                return;
            }
			//点击进入私信
            $("#letterBtn").click(function () {
            	var user = JSON.parse(sessionStorage.getItem("user"));
                if (user.id == params.id){
					$(document).dialog({
						titleShow: '温馨提示',
						content: '您不能私信您自己'
					});
					return;
				}
                window.location.href = "/mine/personalMsg.html?id=" + params.id;
            })

            // $("#letterBtn").click(function () {
            //     var user = JSON.parse(sessionStorage.getItem("user"))
            //     if (user == null) {
            //         $(document).dialog({
            //             type: 'confirm',
            //             style: 'ios',
            //             titleShow: false,
            //             content: '请先登录',
            //             autoClose:2500,
            //             buttons: [
            //                 {
            //                     name: '马上登陆',
            //                     callback: function () {
            //                         window.location.href = "/login.html";
            //                     }
            //                 }
            //
            //             ]
            //         });
            //
            //         return;
            //     }
            //     if (user.id == params.id){
            //         $(document).dialog({
            //             titleShow: '温馨提示',
            //             content: '您不能私信您自己'
            //         });
            //         return;
            //     }
            //     window.location.href = "/mine/chatRoom.html?id=" + params.id;
            // })


            $.get("/users/" + params.id, function (data) {
                //渲染数据
                $(".info").renderValues(data, {
                    getHref: function (item, value) {
                        var href = $(item).data('href');
                        $(item).attr('href', href + value);
                    }
                });
                $(".bg").css("background-image", 'url("' + data.coverImgUrl + '")')
            });

            //根据作者id查询所有点评
            var userId = params.id;
            $.get("/strategyComments/" + userId + "/commends", function (data) {

                //渲染数据到点评的数量
                $("#comments-tab").renderValues(data);
                //给a连接绑定事件
                $("#comments a[data-url]").click(function () {
                    var url = $(this).data("url");
                    var id = $(this).data("cid");

                    window.location.href = url + id;
                })
                $("#comments").renderValues(data, {
                    //获取星星的数量
                    getStarNum: function (item, value) {
                        var children = $(item).children("i");
                        children.removeClass("fa-star").addClass("fa-star-o");
                        for (i = 0; i < value; i++) {
                            $(children[i]).addClass("fa-star");
                            $(children[i]).removeClass("fa-star-o");
                        }
                    },
                    //获取页面图片
                    getImg: function (item, value) {
                        if(value == null){
                            return;
                        }
                        var imgs = value.split(';')
                        var temp = '';
                        $.each(imgs, function (index, ele) {
                            temp += '<li><img src=' + ele + '></li>'
                        })
                        $(item).html(temp);
                    }
                })


                //攻略详情的a链接
                $(".go a").click(function () {
                    var url = $(this).data("u");
                    var id = $(this).data("sid");
                    window.location.href = url + id;
                });
                //给a连接绑定事件
                $("#comments a[data-url]").click(function () {
                    var url = $(this).data("url");
                    var id = $(this).data("cid");
                    window.location.href = url + id;
                })
            })


            //游记分页
            //当前页的input值
            var currentPage = $("#currentPage");
            //总页数
            var pages;
            //定义一个数组用来存储之前的数据
            var arr = [];
            //分页查询的方法
            function query() {
                //当前页的值
                var currentPageValue = currentPage.val();
                //默认选中游记选项卡,发送请求根据作者id查询所有游记
                //获取指定作者所有游记
                $.get("/users/" + params.id + "/travels", {currentPage: currentPageValue, pageSize: 8},
                    function (data) {


                        //往数组容器中存数据(把第二个数组的内容合并到第一个数组中
                        $.merge(arr, data.list);
                        //渲染数据

                        $("#travels").renderValues({list: arr});
                        //渲染数据到游记数量
                        $("#travels-tab").renderValues(data);
                        //设置当前页加+1
                        currentPage.val(parseInt(currentPageValue) + 1);
                        //设置总页数的值
                        pages = data.pages;

                        //给a连接绑定事件
                        $("#travels a[data-u]").click(function () {
                            var url = $(this).data("u");
                            var tid = $(this).data("tid");
                            window.location.href = url + tid;
                        })
                    })
            }


            //默认查询第一页
            query();
            //滚动事件
            $(window).scroll(function () {

                //document(html)卷上去的高度+窗口的高度>=document(html)的整个高度
                if ($(document).scrollTop() + $(window).height() + 1 >= $(document).height()) {
                    //当前页的值
                    var currentPageValue = $("#currentPage").val();
                    //判断currentPageValue当前页是否大于pages总页数
                    if (currentPageValue <= pages) {
                        query();
                    } else {
                        //提示用户已经到底了
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了!',
                            autoClose: 1000
                        });
                    }
                }
            });

            //============================关注和取消关注===================================

            //被关注
            var noticedId = params.id;

            //当前登录人
            var user = JSON.parse(sessionStorage.getItem("user"));
            var noticeId;
            if (user){
                noticeId = user.id;
			}else{
                $("#followBtn").text('关注');
			}

            //关注按钮的回显
            //============================关注数量和粉丝数量===================================
            $.get('/users/' + noticedId + '/notices', function (data) {
                $("#noticeNum").text(data[0]);
                $("#noticedNum").text(data[1]);
            });

            $.get('/notices', {noticeId: noticeId, noticedId: noticedId}, function (data) {

                if (!data.result) {
                    $("#followBtn").text('关注');
                } else {
                    $("#followBtn").text('取消关注');
                }
            })


            //关注
            $("#followBtn").click(function () {

                //登录后才能关注
                if (!sessionStorage.getItem("user")) {
                    $(document).dialog({
                        titleShow: '温馨提示',
                        content: '请登录后再操作'
                    });
                    return;
                }

                if (user.id == params.id){
                    $(document).dialog({
                        titleShow: '温馨提示',
                        content: '您不能关注您自己'
                    });
                    return;
				}

                $.get('/notices', {noticeId: noticeId, noticedId: noticedId}, function (data) {
                    if (!data.result) {
                        $("#followBtn").text('关注');
                        //没查到则添加
                        $.post('/notices', {noticeId: noticeId, noticedId: noticedId}, function (data) {
                            if (data.success) {
                                $("#followBtn").text('取消关注');
                                //关注加粉丝加一
                                var noticedNum = parseInt($("#noticedNum").text()) + 1;

                                $("#noticedNum").text(noticedNum)
                            } else {
                                $(document).dialog({
                                    titleShow: '温馨提示',
                                    content: '操作失败',
                                    autoClose: 15000
                                });
                            }
                        });
                    } else {
                        $("#followBtn").text('取消关注');
                        //使用Ajax来发送各种请求方法的请求；
                        $.ajax({
                            type: 'post',
                            url: "/notices",
                            data: {'_method': 'DELETE', 'noticeId': noticeId, 'noticedId': noticedId},
                            async: false,
                            success: function (data) {
                                if (data.success) {
                                    $("#followBtn").text('关注');
                                    //取消关注粉丝减一
                                    var noticedNum = parseInt($("#noticedNum").text()) - 1;
                                    $("#noticedNum").text(noticedNum)
                                } else {
                                    $(document).dialog({
                                        titleShow: '温馨提示',
                                        content: '操作失败',
                                        autoClose: 1500
                                    });
                                }
                            }
                        })
                    }

                });

            })

        })
	</script>
</head>
<body>

<input type="hidden" name="currentPage" id="currentPage" value="1">

<div class="container bg">

	<a href="javascript:window.history.go(-1)" class="my-arrow">
		<span><i class="fa fa-chevron-left fa-2x"></i></span>
	</a>
	<div class="container">
		<div class="info">
			<img class="rounded-circle" width="17%" render-src="headImgUrl">
			<p class="name" render-html="nickName"></p>
			<p render-html="sign"></p>
			<div class="row num">
				<div class="col-2 border border-left-0 border-top-0 border-bottom-0">
					<div>
						<span id="noticeNum"></span>
					</div>
					<div>
						<a data-href="cares.html?id=" render-key="id" render-fun="getHref">关注</a>
					</div>
				</div>
				<div class="col-2">
					<div>
						<span id="noticedNum" ></span>
					</div>
					<div>
						<a data-href="cares.html?id=" render-key="id" render-fun="getHref">粉丝</a>
					</div>
				</div>
				<div class="col-2">
					<button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
					<button class="btn btn-success ibtn" id="followBtn"></button>
				</div>
			</div>
		</div>
	</div>
</div>


<div class="tabs">
	<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
		role="tablist">
		<li class="nav-item">
			<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
				TA的游记[<span render-html="size"></span>]
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
				TA的点评[<span render-html="size"></span>]
			</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
				TA的旅行单[<span>0</span>]
			</a>
		</li>
	</ul>
	<!--游记页面-->
	<div class="container tab-content" id="pills-tabContent">
		<div class="tab-pane fade show active" id="travels">
			<div render-loop="list">
				<dl class="list">
					<dd>
						<a href="javascript:;" data-u="/travelContent.html?id=" render-attr="data-tid=list.id">
							<img render-src="list.coverUrl">
							<p><span class="title" render-html="list.title"></span>
								<span class="span-right">
                                            <span></span>
                                    <i class="fa fa-thumbs-o-up"></i>
                                </span>
							</p>
						</a>
						<hr>
					</dd>
				</dl>
			</div>
		</div>
		<!--点评页面-->
		<div class="comment tab-pane fade " id="comments">
			<input type="hidden" name="currentPage" value="1">
			<input type="hidden" name="pageSize" value="5">
			<input type="hidden" name="rows" value="1">
			<div render-loop="list">
				<div class="row">
					<div class="col-2 comment-head">
						<img class="rounded-circle" render-src="list.user.headImgUrl">
					</div>
					<div class="col">
                        <span class="comment-star" render-key="list.starNum" render-fun="getStarNum">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                            <i class="fa fa-star-o"></i>
                        </span>

						<span class="comment-date" render-html="list.commendtime"></span>
						<div class="comment-content go">
							<a href="javascript:;" data-url="strategyComment.html?id="
							   render-attr="data-cid=list.strategy.id">
								<a><p render-html="list.content"></p></a>
							</a>
						</div>
						<ul class="comment-img" render-key="list.imgUrls" render-fun="getImg">
							<!--<li>
                                <img render-src="list.imgUrls">
                            </li>-->
						</ul>

						<div class="comment-link go" id="commentIink">
							<a href="javascript:;" data-u="strategyCatalogs.html?strategyId="
							   render-attr="data-sid=list.strategy.id">
								<img render-src="list.strategy.coverUrl">
								<span render-html="list.strategy.title"></span>
								<i class="fa fa-angle-right fa-2x"></i>
							</a>
						</div>

					</div>
				</div>
			</div>

		</div>
		<div class="tab-pane fade" id="pills-contact">.3333..</div>
	</div>
</div>

</body>
</html>